<template>
    <view class="order-form">
        <view class="order-form-box app-box">
            <view class="order-form-adds" @click="showMul()">
                <view v-if="itemAddress.name">
                    <view class="order-form-add-title">
                        <image class="icons" src="https://daiyue.gzzhenyi.net/static/image/user/dizhi@4x.png"
                            mode="heightFix" />
                        <view class="order-form-add-title-content">{{ itemAddress.address }}</view>
                    </view>
                    <view class="order-form-add-content">
                        <view class="name-item">
                            <image class="icons" src="https://daiyue.gzzhenyi.net/static/image/user/renwu@4x.png"
                                mode="heightFix" />
                            <span>{{ itemAddress.name }}</span>

                        </view>
                        <view class="name-phone">
                            <image class="icons" src="https://daiyue.gzzhenyi.net/static/image/user/phone@4x.png"
                                mode="heightFix" />
                            <span>{{ itemAddress.mobile }}</span>
                        </view>
                    </view>
                </view>
                <view class="address-name" v-else>请选择地址</view>
            </view>
            <van-icon name="arrow" color="#999999" />
        </view>

        <view style="padding-bottom: 200rpx;">
            <view class="order-form-box" v-for="(item, index) in addOrder" :key="index">
                <view class="order-form-title">
                    {{ item.shop && item.shop.shop_name }}
                </view>
                <view class="product-item" v-for="(itm, index1) in item.selected" :key="index1">
                    <view class="product-item-img">
                        <image :src="baseUrl + itm.thumbnail" mode="aspectFill" />
                    </view>
                    <view class="product-item-content">
                        <view class="product-item-content-title">
                            {{ itm.title }}
                        </view>
                        <view class="product-item-content-price">
                            {{ itm.sn }}
                        </view>
                        <view class="product-item-content-num">
                            ￥{{ itm.market_price || itm.vip_price }}
                        </view>
                        <view class="product-item-content-ps">
                            不支持无理由退货
                        </view>
                    </view>
                    <van-stepper class="stepper" v-model="itm.number" :max="itm.stock" :min="1" button-size="20px"
                        @change="onChange($event, index, index1)" />
                </view>
                <view class="product-item-flex">
                    <view class="product-item-name">配送服务</view>
                    <view class="product-item-num">快递 包邮 <van-icon name="arrow" color="#999999" /></view>
                </view>
                <!-- <view class="product-item-flex">
            <view class="product-item-name">自提</view>
            <view class="product-item-num">8月19日 12:00~18:00</view>
        </view> -->
                <view class="product-item-flex" @tap="toRemarks(index, item.remarks)">
                    <view class="product-item-name">订单备注</view>
                    <view class="product-item-num" v-if="item.remarks">{{ item.remarks }}
                        <van-icon class="" name="arrow" color="#999999" />
                    </view>
                    <view class="product-item-num" style="color: #A2A2A2;" v-else>无备注 <van-icon class="" name="arrow"
                            color="#999999" /></view>
                </view>
            </view>
            <view class="order-form-box" style="padding: 10upx 30upx;">
                <view class="product-item-flex">
                    <view class="product-item-name">商品总价 <span>共{{ shopNum }}件商品</span></view>
                    <view class="product-item-num" style="right: 0;">￥{{ priceNum }}</view>
                </view>
                <view class="product-item-flex">
                    <view class="product-item-name">合计</view>
                    <view class="product-item-prod">￥{{ total }}</view>
                </view>
            </view>

            <view class="order-form-box">
                <view class="product-item-flex" style="margin: 10upx 0;">
                    <view class="order-flex">
                        <image class="icons" src="https://daiyue.gzzhenyi.net/static/image/order/wei@4x.png"
                            mode="heightFix" />
                        <view class="product-item-name">微信支付</view>
                    </view>
                    <image class="icons" src="https://daiyue.gzzhenyi.net/static/index/car-sel.svg" mode="heightFix" />
                </view>
            </view>


            <view class="order-form-bottm">
                <view class="order-form-bottm-btn">
                    <view class="order-form-flex">
                        <view class="order-form-flex-left">共 {{ shopNum }} 件,合计：</view>
                        <view class="order-form-flex-right">{{ total }}元</view>
                    </view>
                    <view class="order-form-button" @click="SubmitOrder">提交订单</view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
import { getAddressList, getPayInfo, submitOrder, payOrder } from '@/api/api'
import {
    mapState, mapMutations
} from 'vuex';
import baseUrl from '@/api/baseUrl';
export default {
    data() {
        return {
            baseUrl,
            stepper: 1,
            itemAddress: {},
            total: 0,
            number: 1,
            shopNum: 0,
            priceNum: 0
        }
    },
    onLoad(options) {
        this.addresss()
        this.totalCilck()

    },
    computed: {
        ...mapState('commodity', ['addOrder']),
    },
    methods: {
        ...mapMutations('commodity', ['saveAddOrder']),

        totalCilck() {
            let { addOrder } = this
            let num = 0
            let total = 0
            let priceNum = 0
            addOrder.map(item => {
                item.selected.map(itm => {
					console.log(itm)
                    num += itm.number
                    priceNum += Number(itm.market_price) || Number(itm.vip_price)
                    total = (num * (Number(itm.market_price) || Number(itm.vip_price)))
                })
            })
            this.shopNum = num
            this.total = total.toFixed(2)
            this.priceNum = priceNum.toFixed(2)
        },
        addresss() {
            getAddressList().then(res => {
                if (res.code == 1) {
                    res.data.data.forEach(element => {
                        if (element.default == 1) {
                            this.itemAddress = element
                        }
                    });
                }
            })
        },
        onChange(e, key, index) {
            let array = this.addOrder
            array[key].selected[index].number = e.detail
            console.log(array[key].selected[index].number)
            this.saveAddOrder(array)
            this.totalCilck()
        },
        SubmitOrder() {
            let { addOrder, itemAddress } = this
            let data = {
                order: {
                    address_id: itemAddress.id,
                    token: '42342342352',

                    lists: []
                }
            }
            addOrder.map(item => {
                let products = []
                item.selected.map(itm => {
                    products.push({
                        goods_id: itm.goods_id,
                        number: itm.number,
                        sku_id: itm.id,
                        freight_price: 1
                    })
                })
                data.order.lists.push({
                    shop_id: item.shop.shop_id,
                    products: products,
                    remarks: item.remarks || ''
                })

            })

            submitOrder(data).then(res => {
                console.log(res)
                if (res.code == 1 && res.data.list) {
                    payOrder({ order_id: res.data.list[0].order_id, token: res.data.token }).then(resPay => {
                        if (resPay.code == 1) {
                            this.payIf(resPay.data)
                        } else {
                            uni.showToast({
                                title: resPay.msg,
                                icon: 'none'
                            })
                        }

                    })
                }
            })


        },
        getList(val, index) {
            // let arr = this.addOrder
            this.addOrder[index].remarks = val
            // console.log(arr)

            this.saveAddOrder(this.addOrder)
            // console.log(val, index)
        },
        payIf(data) {
            uni.requestPayment({
                provider: 'wxpay',
                "timeStamp": data.timeStamp, //时间戳
                "nonceStr": data.nonceStr,//随机字符串
                "package": data.package,//接口返回的prepay_id
                "signType": data.signType,//签名算法，需要与后台下单时一致
                "paySign": data.paySign,// 签名

                success: function (res) {
                    console.log('success:' + JSON.stringify(res));
                    uni.navigateTo({ url: '/long/payment/payment?payShow=true' })
                },
                fail: function (err) {
                    console.log('fail:' + JSON.stringify(err));
                    uni.navigateTo({ url: '/long/payment/payment?payShow=false' })
                }
            });
        },
        toRemarks(index) {
            uni.navigateTo({ url: '/long/orderForm/remarks?index=' + index })
        },
        showMul() {
            uni.navigateTo({ url: '/pages/location/address?type=1' })
        },
        getValue(item) {
            // console.log('1212', item)
            this.itemAddress = item
        }
    }
}
</script>

<style scoped lang="scss">
.icons {
    height: 32upx;

}

.address-name {
    font-size: 30upx;
    color: #333333;
}

.order-form {
    padding: 10upx 30upx;
}

.order-form-box {
    background-color: #FFFFFF;
    border-radius: 15px;
    box-shadow: 0px 2px 8px 0px rgba(205, 205, 205, 0.2031);
    margin: 20upx 0;
    padding: 30upx;
}

.app-box {
    display: flex;
    align-items: center;
}

.order-form-adds {
    flex: 1;
}

.order-form-add-title {
    display: flex;
    align-items: center;
    margin-bottom: 10upx;


    .order-form-add-title-content {
        color: #333333;
        font-size: 30upx;
        margin-left: 20upx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 300upx;
        flex-shrink: 1;
        flex-grow: 1;
        flex-basis: 0;
        font-weight: normal;

    }
}

.order-form-add-content,
.name-item,
.name-phone {
    display: flex;
    align-items: center;
}

.name-item {
    width: 180upx;

    .icons {
        margin-right: 15upx;
    }

    span {
        color: #333333;
        font-size: 30upx;
    }
}

.name-phone {
    width: 350upx;

    .icons {
        margin-right: 10upx;
    }

    span {
        color: #333333;
        font-size: 30upx;
    }
}

.order-form-title {
    font-size: 30upx;
    color: #333333;
    margin-bottom: 20upx;
}

.product-item {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 30upx;

    .product-item-img,
    image {
        width: 198upx;
        height: 148upx;
        border-radius: 8px;
        background: #FFFFFF;
        box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.06);
    }
}

.product-item-content {
    flex: 1;
    margin-left: 20upx;

    .product-item-content-title {
        font-size: 30upx;
        color: #333333;
        margin-bottom: 10upx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 300upx;
    }

    .product-item-content-price {
        font-size: 20upx;
        color: #5C5C5C;
        margin-bottom: 10upx;
    }

    .product-item-content-num {
        color: #333333;
        font-size: 22upx;
        margin-bottom: 10upx;
    }

    .product-item-content-ps {
        font-size: 22upx;
        color: #FF6200;
    }
}

.stepper {
    position: absolute;
    right: 0upx;
    bottom: 0upx;
    z-index: 1;
}

.product-item-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 30upx 0;
    position: relative;

    .product-item-name {
        font-size: 30upx;
        color: #333333;
        width: 300upx;

        span {
            margin-left: 10upx;
            color: #A2A2A2;
            font-size: 24upx;

        }
    }

    .product-item-num {
        font-size: 30upx;
        color: #333333;
        display: flex;
        align-items: center;
        position: absolute;
        width: 300upx;
        right: -10upx;
        justify-content: flex-end;
    }

    .product-item-prod {
        color: #FF6200;
        font-size: 30upx;
    }
}

.order-flex {
    display: flex;
    align-items: center;

    .icons {
        margin-right: 10upx;
    }

}

.order-form-bottm {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #FFFFFF;
    height: 150upx;
    z-index: 99;

    .order-form-bottm-btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20upx 30upx;

        .order-form-flex {
            display: flex;
            align-items: center;

            .order-form-flex-left {
                font-size: 24upx;
                color: #5C5C5C;
            }

            .order-form-flex-right {
                font-size: 36upx;
                color: #FF6200;
            }
        }

        .order-form-button {
            border-radius: 35px;
            background-color: #FF6200;
            font-size: 30upx;
            color: #FFFFFF;
            padding: 14upx 30upx;
            text-align: center;
        }
    }
}
</style>